<template>
  <div class="slider">
      <el-menu
      default-active="onRuters"
      class="el-menu-vertical-demo"
      background-color="#324157"
      text-color="#fff"
      active-text-color="#20a0ff" unique-opened router>
      <el-menu-item index="DashBoard">
          <i class="el-icon-star-off"></i>
          <span>DashBoard</span>
      </el-menu-item>
      <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-edit"></i>
                    <span>Components</span> 
                </template>
                <el-menu-item-group>
                  <el-menu-item index="EditorPage">Editor</el-menu-item>
                  <el-menu-item index="MarkdownPage">Markdown</el-menu-item>
                  <el-menu-item index="TodoList">TodoList</el-menu-item>
                </el-menu-item-group>
                     
                
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">
                    <span class="sb-icon"><i class="el-icon-document"></i></span>
                    <span class="sb-cn">charts</span>
                </template>
                <el-menu-item index="BasicCharts"> BasicCharts</el-menu-item>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                    <span class="sb-icon"><i class="el-icon-tickets"></i></span>
                    <span class="sb-cn">Form Elements</span>
                </template>
                <el-menu-item index="FormInput"> Form Inputs</el-menu-item>
                <el-menu-item index="FormLayouts">  Form Layouts</el-menu-item>
            </el-submenu>

             <el-submenu index="5">
                <template slot="title">
                    <span class="sb-icon"><i class="el-icon-bell"></i></span>
                    <span class="sb-cn">Tables</span>
                </template>
                <el-menu-item index="BasicTables"> Basic Tables</el-menu-item>
                
            </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  computed:{
    onRuters() {
      return this.$router.path.replace('/','');
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>
<style scoped>
.slider {
  display: block;
  position: absolute;
  /* height: 100%; */
  width: 200px;
  top: 66px;
  bottom: 0;
  background: #324157;
}
.slider > ul {
  height: 100%;
}
</style>


